<template>
  <!-- 组织架构页面 -->
  <div class="dashboard-container">
    <el-card class="tree-card">
      <!-- 标题区的组件 -->
      <tree-tools :obj="companyInfo" :is-root="true" @add-dept="onAdd" />
      <!-- 树形控件：折叠数据 -->
      <el-tree
        :data="treeData"
        :props="defaultProps"
        :default-expand-all="false"
      >
        <!-- 内容区的组件 -->
        <tree-tools slot-scope="{data}" :obj="data" @add-dept="onAdd" @edit-dept="onEdit" />
      </el-tree>
    </el-card>
    <!-- 部门操作时弹层 -->
    <add-dept ref="depts" v-model="addDialgVisible" :node="nodeData" @add-success="loadDepartmentList" @edit-success="loadDepartmentList" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import treeTools from './components/tree-tools.vue'
import { getDepartmentsList } from '@/api/departments.js'
import { transListToTree } from '@/utils'
import AddDept from './components/addDept.vue'
export default {
  name: 'Dashboard',
  components: { treeTools, AddDept },
  data() {
    return {
      treeData: [],
      defaultProps: {
        label: 'name'
      },
      companyInfo: { name: '传智播客', manager: '负责人', id: '' },
      addDialgVisible: false,
      nodeData: {}
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    this.loadDepartmentList()
  },
  methods: {
    async loadDepartmentList() {
      const res = await getDepartmentsList()
      console.log(res)
      // console.log(res)
      this.treeData = transListToTree(res.depts, '')
    },
    // 添加子部门
    onAdd(data) {
      // console.log(123)
      this.addDialgVisible = true
      // console.log(data)
      this.nodeData = data
    },
    // 查看部门
    onEdit(data) {
      // console.log('编辑')
      // 开启弹层
      this.addDialgVisible = true
      // 传输当前数据为了校验
      this.nodeData = data
      // 为了获取最新数据进行查看的弹层渲染
      this.$refs.depts.getNewDepartmentData(data.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
